<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	@import "dojo-1.3.2/dojo/resources/dojo.css";
	@import "dojo-1.3.2/dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="dojo-1.3.2/dojo/dojo.js"></script>
<script type="text/javascript">

dojo.require("dojox.gfx");
dojo.require("dojox.gfx.move");


var container = null,
	surface = null,
	surface_size = null;

function getRand(from, to){
	return Math.random() * (to - from) + from;
}

var skew_stat_factor = 15;

function getRandSkewed(from, to){
	// let skew stats to smaller values
	var seed = 0;
	for(var i = 0; i < skew_stat_factor; ++i){
		seed += Math.random();
	}
	seed = 2 * Math.abs(seed / skew_stat_factor - 0.5);
	return seed * (to - from) + from;
}

function randColor(alpha){
	var red   = Math.floor(getRand(0, 255)),
		green = Math.floor(getRand(0, 255)),
		blue  = Math.floor(getRand(0, 255)),
		opacity = alpha ? getRand(0.1, 1) : 1;
	return [red, green, blue, opacity];
}

function initGfx(){
	container = dojo.byId("line");
	surface = dojox.gfx.createSurface(container, 1000, 1000);
	surface_size = {width: 1000, height: 1000};

	//makeCircleGrid(100);

	// cancel text selection and text dragging
	//dojo.connect(container, "ondragstart",   dojo, "stopEvent");
	//dojo.connect(container, "onselectstart", dojo, "stopEvent");
}

dojo.addOnLoad(initGfx);

var x1Pos=0;
var y1Pos=0;
var x2Pos=0;
var y2Pos=0;
var book;
var lang;

function setColor(obj,evt)
{
	book=obj;
	x1Pos = evt.clientX;
    y1Pos = evt.clientY;
	
	//alert("here");
	obj.style.color = '#000000';
 obj.style.backgroundColor="#CCC";
 	
	
}


function connectWords(obj,evt){
	lang=obj;
	x2Pos = evt.clientX;
    y2Pos = evt.clientY;
	obj.style.backgroundColor="#6CF";
	obj.style.color = '#000000';
	
	book.style.backgroundColor="#900";
	book.style.color = '#FFFFFF';
	
	drawLine();
	
/*	x1Pos=10;
	y1Pos=10;
	x2Pos=50;
	y2Pos=50;
	
	drawLine();
	*/
	}
	
drawLine = function(){
	
	alert(x1Pos +" "+y1Pos + " "+ x2Pos +" "+y2Pos);

//container = dojo.byId("line");
//container_position = dojo.coords(container, true);
//surface = dojox.gfx.createSurface(container, 500, 500);
//surface_size = {width: 500, height: 500};
var line = surface.createLine({x1: x1Pos, y1: y1Pos, x2: x2Pos, y2: y2Pos})
.setStroke({color: randColor(true), width: getRand(1, 3)});
}



</script>

<style type="text/css">
.movable { cursor: pointer; }
</style>

</head>

<body>




<div id="line" style="width: 1000px; height: 1000px;" >
<div style="position:fixed" align="center">
 
<table align="center" width="437" height="235" border="0">
  <tr>
  <td width="27"> </td>
    <td width="83" align="center"><div id="b1" style="background:#900; color:#FFF" onclick="setColor(this,event)"> Book1</div></td>
    <td width="237"></td>

    <td width="72" align="center"><div id="l1" style=" background:#063; color:#FFF" onclick="connectWords(this,event)"> English</div></td>
  </tr>
  
  <tr>
  <td width="27"> </td>
    <td width="83" align="center"><div id="b1" style="background:#900; color:#FFF" onclick="setColor(this,event)"> Book2</div></td>
    <td width="237"></td>

    <td width="72" align="center"><div id="l1" style=" background:#063; color:#FFF" onclick="connectWords(this,event)"> Telugu</div></td>
  </tr>
  
  <tr>
  <td width="27"> </td>
    <td width="83" align="center"><div id="b1" style="background:#900; color:#FFF" onclick="setColor(this,event)"> Book3</div></td>
    <td width="237"></td>

    <td width="72" align="center"><div id="l1" style=" background:#063; color:#FFF" onclick="connectWords(this,event)"> Hindi</div></td>
  </tr>
  
  
  
</table>
</div>


</div>



</body>
</html>
